<template>
    <HeaderTitle :textObj="textObj" @add="onAdd" right-text="新增"></HeaderTitle>

    <!-- 表格内容 -->
<el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" :index="1" label="序号" prop="index" width="80" align="center" />
    <!-- <el-table-column align="center" prop="id" label="序号" /> -->
    <el-table-column align="center" prop="account" label="账号" />
    <el-table-column align="center" prop="username" label="用户名" />
    <el-table-column align="center" prop="password" label="密码" />
    <el-table-column align="center" prop="type" label="类型">
        <template #default="scope">
            {{ ['普通用户', '普通管理员', '超级管理员'][scope.row.type - 1] }}
        </template>
    </el-table-column>
    <el-table-column align="center" :formatter="row=> formatDate(row , 'cTime')" prop="cTime" label="创建日期" />
    <el-table-column align="center" :formatter="row=> formatDate(row , 'uTime')" prop="uTime" label="更新日期" />
            <!-- <el-table-column align="center" :formatter="formatTableDate" prop="cTime" label="创建日期" />
        <el-table-column align="center" :formatter="formatTableDate" prop="uTime" label="更新日期" /> -->
    <el-table-column align="center" prop="desc" label="描述" />
        <el-table-column align="center" label="操作">
            <template #default="scope">
                <router-link to="/account/add">
                <el-button :icon="Edit" type="primary" @click="handleEdit(scope.index, scope.row)" circle style="margin-right: 10px;">
                </el-button>
                </router-link>
                <!-- <el-button :icon="Delete" type="danger" @click="handleDelete(scope.row)" circle>
                </el-button> -->
                <el-button 
   :icon="Delete" 
   type="danger" 
   circle 
   @click="handleDelete(scope.row)">   
</el-button>
            </template>
        </el-table-column> 
</el-table>
</template>

<script setup>
import HeaderTitle from '../../components/HeaderTitle.vue';
import { accountList ,accountDel} from '@/api/index';
import { ref, onMounted } from 'vue';
import { formatDate } from '@/utils/utils';
import { Delete, Edit, } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus'
let textObj = {
    module: '子账号',
    name: '子账号列表',
    desc: '展示当前组织下的所有子账号，可修改子账号信息或删除子账号。',    
}

let editObj = ref({});
// 显示对话框, 传数据
let editIndex = -1;
const handleEdit = (index, row) => {
    console.log('handleEdit', index, row);
}
// 删除处理函数   
const handleDelete = async (row) => {
   try {
    // 确认弹窗
    await ElMessageBox.confirm(
      `确认删除账号【${row.account}】吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 调用删除接口
    const res = await accountDel({ id: row.id })
    
    if (res.code === 666) {
      ElMessage.success('删除成功')
      // 删除后刷新列表（或在前端直接删除对应项）
      await getList()
    } else {
      ElMessage.error(res.msg || '删除失败')
    }
   } catch (error) {
    // 用户取消删除时会进入catch
    if (error !== 'cancel') {
      ElMessage.error('删除操作失败')
      console.error('删除失败:', error)
    }
   }   
}

// 获取列表数据
const tableData = ref([

])
// 页面加载完成后, 获取列表数据
const getList = async () => {
    try {
        const res = await accountList();
        if (res.code === 666 && res.msg === 'success') {
            tableData.value = res.data || []; // 确保 res.data 存在，否则返回空数组
        } else {
            console.error('Unexpected response:', res);
        }
    } catch (err) {
        console.error('Error fetching data:', err);
    }   
};

onMounted(getList);

</script>